<!DOCTYPE html>

<html>

<head>
    <title>OpenQL</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<style>
    .class1 {
        background: #444;
        color: rgb(228, 99, 99);
    }
</style>

<body>
    <h1>Hello, OpenQL!</h1>

    <div id="app">
        <h1>{{ message }}</h1>
        {{ world }}
        {{ 10 + 8}}

        <label for="r1">Color</label><input type="checkbox" v-model="use" id="r1" />
        <div v-bind:class="{'class1' : use}">
            {{ times() }}
        </div>

        <p v-if="visable">xxyyxx</p>

    </div>

    <div id="t">
        <div v-html="msg"></div>
    </div>

</body>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            world: " hello, world",
            use: false,
            visable: true,
        },
        methods: {
            times: function () {
                return this.world + "...hah...";
            }
        }
    })

    var t = new Vue({
        el: '#t',
        data: {
            msg: "<h2> aabbccdd </h2>"
        }
    })

    var mydata = { h: "Hello Vue!" };
    var alex = 123;
    document.write(app.message === mydata.h)
    document.write("<br>")
    document.write(alex)
</script>

</html>